<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>丁璐的个人主页</title>
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/information.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2104966_zj8cmdwl4e8.css">
    <link rel="stylesheet" href="css/show-time.css">
    <link rel="stylesheet" href="css/photowall.css">
</head>
<body>
    <div class="head">
        <div class="flow-bg"></div>
        <div class="Motto">不怕路远，哪怕一天看一点</div>
        <div class="word">
            <p>有时候我觉得已走到世界的尽头</p>
            <p>在这个城市里</p>
            <p>我不断地迷路</p>
            <p>不断地坐错车</p>
            <p>并一再下错车</p>
            <p>常常不知道自己在哪里</p>
            <p>要去什么地方</p>
        </div>
        <div class="title">
            <table>
            <td>白</td>
            <td>*</td>
            </table>
            <table>
            <td>*</td>
            <td>日</td>
            </table>
            <table>
            <td>梦</td>
            <td>*</td>
            </table>
            <table>
            <td>*</td>
            <td>想</td>
            </table>
            <table>
            <td>家</td>
            <td>*</td>
            </table>
        </div>
    </div>
    <div class="information">
        <a class="about-me">自我介绍</a>
        <div class="line1"></div>
        <img class="touxiang" src="images/女孩.png" alt="">
        <div class="introduce">
            <a>
                <i class="iconfont icon-xingming" style="font-size: 28px;display: inline-block;margin: 27px auto auto auto;vertical-align: bottom;"></i>
                <span>姓名：丁璐<br></span>
            </a>
            <a>
                <i class="iconfont icon-V" style="font-size: 28px;display: inline-block;margin: 27px auto auto auto;vertical-align: bottom;"></i>
                <span>性别：女<br></span>
            </a>
            <a>
                <i class="iconfont icon-calendar" style="font-size: 28px;display: inline-block;margin: 27px auto auto auto;vertical-align: bottom;"></i>
                <span>出生年月：1999年2月<br></span>
            </a>
            <a>
              <i class="iconfont icon-aihao" style="font-size: 28px;display: inline-block;margin: 27px auto auto auto;vertical-align: bottom;"></i>
              <span>爱好：动漫、电影<br></span> 
            </a>
            <a>
                <i class="iconfont icon-huiyuan" style="font-size: 28px;display: inline-block;margin: 27px auto auto auto;vertical-align: bottom;"></i>
                <span>专长：掌握C、Python、C++等高级语言。熟练使用office办公软件<br></span>
            </a>
            <a>
                <i class="iconfont icon-jianglipingtai" style="font-size: 28px;display: inline-block;margin: 27px auto auto auto;vertical-align: bottom;"></i>
                <span>在校期间奖惩情况：<br></span>
                <a href="#">1.2017-2018学年，英语四六级、校级一等人民奖学金<br>
                    2.2018-2019学年，全国大学生英语竞赛C类三等奖、国家励志奖学金<br>
                    3.2019-2020学年，全国大学生计算机设计大赛优秀奖<br>
                </a>
            </a>
        </div>
       

    </div>
    <div class="swiper">
        <div class="swiper-content">
            <img src="images/img2.jpg" alt="">
            <img src="images/img1.jpg" alt="">
            <img src="images/img3.jpg" alt="">
            <img src="images/img4.jpg" alt="">
            <img src="images/img5.jpg" alt="">
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        let index = 0;
        $("#next").click(function () {
            index++;
            console.log(index)
            if (index > 4) {
                index = 0;
            }
            animate(1000)
        })
        
        $("#prev").click(function () {
            index--;
            if (index < 0) {
                index = 4;
            }
            animate(1000)
        })
     
        $("#btns span").click(function(){
            index = $(this).index();
            
            animate(1000)
        })
        function animate(speed) {
            $(".swiper-content img").eq(index).fadeIn(speed).siblings().fadeOut(speed)
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
        }
    </script>
    <div class="show-time">
        <p class="s-title">心灵驿站</p>
        <div class="line2"></div>
        <img class="gif" src="images/杯子.gif" alt="">
        <div class="s-content">
            <div>
                <img class="icon1"src="images/花架.png" alt="">
                <div class="content1">吵吵闹闹的日子里，与花花草草静静地度过。我们不能永远年轻，也不能永远热泪盈眶，却依旧对这个现实的世界怀充满幻想。</div>
            </div>
            <div>
                <img class="icon2"src="images/柜子.png" alt="">
                <div class="content2">“竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生”。苏轼的诗，总会带给人一股油然而生的希望和力量，让每一个在困境的人都有擦干眼泪向前冲的勇气。</div>
            </div>
            <div>
                <img class="icon3"src="images/录音机.png" alt="">
                <div class="content3">动听的音乐就像是飞舞的蝴蝶在空中翩翩起舞，也像是叮咚的泉水在山间流淌，有时候，也像是璀璨的星辰，在夜空用闪烁。</div>
            </div>
            <div>
                <img class="icon4"src="images/色块－电视机.png" alt="">
                <div class="content4">闲下来的刷剧时光里，走过了山川大海，体验了千百种不同的人生。给了人做梦的时间，为接下来的日子充充电。</div>
            </div>
            <div>
                <img class="icon5"src="images/宠物.png" alt="">
                <div class="content5">一人，一屋，一只猫或者狗，这就是大多数人梦寐以求的生活吧。用爱宠驱散孤独，抚慰心灵。</div>
            </div>
        </div>
    </div>
    <div class="photo-wall">
        <div class="line3"></div>
        <div class="fenjiexian"><img src="images/mao.png" alt=""></div>
        <div class="p-title">照片墙</div>
        <div class="photos">
            <img class="pho1" src="images/pho1.jpg" alt="">
            <img class="pho2" src="images/pho2.jpg" alt="">
            <img class="pho3" src="images/pho3.jpg" alt="">
            <img class="pho4" src="images/pho4.jpg" alt="">
            <img class="pho5" src="images/pho21.jpg" alt="">
            <img class="pho6" src="images/pho6.jpg" alt="">
            <img class="pho7" src="images/pho7.jpg" alt="">
            <img class="pho8" src="images/pho8.jpg" alt="">
            <img class="pho9" src="images/pho9.jpg" alt="">
            <img class="pho10" src="images/pho10.jpg" alt="">
            <img class="pho11" src="images/pho11.jpg" alt="">
            <img class="pho12" src="images/pho12.jpg" alt="">
            <img class="pho13" src="images/pho13.jpg" alt="">
            <img class="pho14" src="images/pho14.jpg" alt="">
            <img class="pho15" src="images/pho15.jpg" alt="">
            <img class="pho16" src="images/pho20.jpg" alt="">
            <img class="pho17" src="images/pho17.jpg" alt="">
            <img class="pho18" src="images/pho18.jpg" alt="">
            <img class="pho19" src="images/pho19.jpg" alt="">
        </div>
        <div class="p-content">
            <p>hey!</p>
        <p>你知道吗？</p>
        <p>据说鱼的记忆力只有七秒......</p>
        <p>忙忙碌碌的人类的记忆甚至是鱼的上万倍</p>
        <p>我们比鱼更渴望窥探世间万物的瑰丽</p>
        <p>一点点走在脚下</p>
        <p>是热切的期盼</p>
        <p>也是一场救赎的热望</p>
        <p>为星光加上一点彩虹</p>
        <p>飘舞的樱花偷偷吻上额头</p>
        <p>这世间的美好</p>
        <p>原来与你环环相扣</p>
        </div>
        <img class="fish"src="images/鱼 (1).png" alt="">   
    </div>
    <div class="bottom">
        <!-- <p>联系方式</p> -->
        <a>
            <i class="iconfont icon-qq"style="font-size: 28px;display: inline-block;margin: 47px auto auto auto;vertical-align: bottom;"></i>
            <span>QQ:329823078</span>
        </a>
        <a>
            <i class="iconfont icon-weixin"style="font-size: 28px;display: inline-block;margin: 47px auto auto auto;vertical-align: bottom;"></i>
            <span>微信：17334614851</span>
        </a>
        <a>
            <i class="iconfont icon-weibo"style="font-size: 28px;display: inline-block;margin: 47px auto auto auto;vertical-align: bottom;"></i>
            <span>微博：17334614851</span>
        </a>
        <a>
            <i class="iconfont icon-lujing141"style="font-size: 28px;display: inline-block;margin: 47px auto auto auto;vertical-align: bottom;"></i>
            <span>手机：17334614851</span>
        </a>
        <a>
            <i class="iconfont icon-email"style="font-size: 28px;display: inline-block;margin: 47px auto auto auto;vertical-align: bottom;"></i>
            <span>电子邮件：329823078@qq.com</span>
        </a>    
    </div>
</body>
</html>